<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  </head>
  <body>
    <div id="app">
      <input type="button" value="点击显示/隐藏" @clcik="toggleFn" />
      <transition>
        <div v-if="flag">
          <h1>hello</h1>
        </div>
      </transition>
      <input type="button" value="点击显示/隐藏" @clcik="toggleFn2" />
      <transition name="my">
        <div v-if="flag">
          <h1>vue</h1>
        </div>
      </transition>
    </div>
  </body>
  <script src="vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        flag2:true
      },
      methods: {
        toggleFn() {
          this.flag = !this.flag;
        },
        toggleFn2() {
          this.flag2 = !this.flag2;
        }
      }
    })
  </script>
  <style>

    .v-enter,.v-leave-to{
      opacity: 0;
      transform: translateX(100px);
    }

    .v-enter-active,.v-leave-active{
      transition: all 0.5s;
    }
    .myF-enter,.myF-leave-to{
      opacity: 0;
      transform: translateX(100px);
    }
    .myF-enter-active,.myF-leav-active{
    transition: all 0.5 ease;
    }
  </style>
</html>
